<!DOCTYPE html>
<html>

<head>
  <title>React Albus Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.aexp-static.com/cdaas/one/statics/axp-dls/5.6.0/package/dist/styles/dls.min.css">
  <style>
    .demo-container {
      padding-top: 149px;
    }

    @media (min-width: 768px) {
      .demo-container {
        padding-top: 91px;
      }
    }

    .demo-nav {
      top: 0;
      left: 0;
      z-index: 1;
    }
  </style>
</head>

<body class="pad-responsive dls-accent-gray-02-bg">
  <div class="position-fixed fluid demo-nav">
    <div class="pad dls-accent-blue-02-bg dls-accent-white-01">
      <div class="row">
        <div class="col-xs-12 col-md-9 col-xl-10 flex flex-align-center pad-b-md-down">
          <h1 class="heading-6 margin-0 text-align-center-md-down fluid">React Albus</h1>
        </div>
        <div class="col-xs-12 col-sm-8 col-md-3 col-md-offset-0 col-xl-2 margin-center-md-down">
          <a href="https://github.com/americanexpress/react-albus" class="btn btn-secondary btn-fluid">Github</a>
        </div>
      </div>
    </div>
  </div>
  <div class="demo-container">
    <div class="card margin-responsive-b">
      <div class="pad">
        <h1 class="heading-5 dls-accent-blue-02 margin-b">Start Simple</h1>
        <iframe loading="lazy" src="https://codesandbox.io/embed/github/americanexpress/react-albus/tree/main/examples/start-simple" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
      </div>
    </div>
    <div class="card margin-responsive-b">
      <div class="pad">
        <h1 class="heading-5 dls-accent-blue-02 margin-b">Add Routing</h1>
        <iframe loading="lazy" src="https://codesandbox.io/embed/github/americanexpress/react-albus/tree/main/examples/add-routing" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
      </div>
    </div>
    <div class="card margin-responsive-b">
      <div class="pad">
        <h1 class="heading-5 dls-accent-blue-02 margin-b">Add Animation</h1>
        <iframe loading="lazy" src="https://codesandbox.io/embed/github/americanexpress/react-albus/tree/main/examples/add-animation" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
      </div>
    </div>
    <div class="card">
      <div class="pad">
        <h1 class="heading-5 dls-accent-blue-02 margin-b">Add Progress Bar</h1>
        <iframe loading="lazy" src="https://codesandbox.io/embed/github/americanexpress/react-albus/tree/main/examples/add-progress-bar" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
      </div>
    </div>
    <div class="card">
      <div class="pad">
        <h1 class="heading-5 dls-accent-blue-02 margin-b">Skip A Step</h1>
        <iframe loading="lazy" src="https://codesandbox.io/embed/github/americanexpress/react-albus/tree/main/examples/skip-a-step" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
      </div>
    </div>
    <div>
</body>

</html>
